<template>
  <el-dialog :title="title" :visible="visible" top="16%" width="450px" :before-close="handleClose">
    <div class="preview">
      <div class="img">
        <el-image :src="require('@/assets/images/material/audio.png')"></el-image>
      </div>
      <div class="player">
        <EduAliyunPlayer ref="player" @ready="ready" :args="aplayer" :skinLayout="skinLayout">
        </EduAliyunPlayer>
        <div class="duration">{{ duration | formatSeconds }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import EduAliyunPlayer from '@/components/EduAliyunPlayer' // 播放器
const defaultProps = {
  id: 'player-con', // 播放器外层容器的dom元素ID
  source: '', // 视频播放地址URL
  vid: '', // 媒体转码服务的媒体ID
  playauth: '', // 播放凭证
  width: '318px', // 播放器宽度
  height: '44px', // 播放器高度
  cover: '', // 播放器默认封面图片
  format: 'm3u8', // 播放地址格式
  autoplay: false, // 播放器是否自动播放
  encryptType: 0, // 设置是否播放阿里云视频加密（私有加密）视频
  controlBarVisibility: 'always', // 控制面板的实现
  marquee: [''] // 跑马灯
}
export default {
  props: {
    visible: Boolean,
    src: String,
    title: String
  },
  components: {
    EduAliyunPlayer
  },
  data() {
    return {
      aplayer: {
        ...defaultProps,
        source: this.src
      },
      skinLayout: [
        {
          name: 'controlBar',
          align: 'blabs',
          x: 0,
          y: 0,
          children: [
            { name: 'progress', align: 'blabs', x: 0, y: 44 },
            { name: 'playButton', align: 'tl', x: 146, y: 18 },
            { name: 'timeDisplay' }
          ]
        }
      ],
      duration: 0
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    ready(player) {
      this.duration = player.getDuration()
    }
  },
  beforeDestroy() {
    const player = this.$refs.player
    player && player.pause()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__title {
  display: block;
  max-width: 220px;
  @include ellipsis();
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e7ed;
}
.preview {
  display: flex;
  align-items: center;
  .img {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebeef5;
  }
  .player {
    margin-left: auto;
    position: relative;
    .current-time,
    .duration {
      position: absolute;
      top: 18px;
      font-size: 12px;
      font-weight: 400;
      color: #606266;
      line-height: 26px;
    }
    .current-time {
      left: 0;
    }
    .duration {
      right: 0;
    }
  }
  ::v-deep .rate-components,
  ::v-deep .prism-animation {
    display: none;
  }
  ::v-deep .prism-player {
    background-color: #fff;
    .prism-progress {
      height: 6px;
    }
    .prism-progress .prism-progress-cursor img {
      width: 16px;
      height: 16px;
    }
    .prism-progress .prism-progress-cursor {
      width: 18px;
      height: 18px;
      border-radius: 9px;
    }
    .prism-play-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      @include edu-color-primary(background-color);
      background-position: center;
      background-size: 18px;
    }
    .prism-controlbar .prism-controlbar-bg {
      display: none;
    }
    .prism-progress .prism-progress-played {
      @include edu-color-primary(background-color);
      border-radius: 3px;
    }
    .prism-progress .prism-progress-cursor {
      background: none;
      background-color: #fff;
      border-width: 2px;
      border-style: solid;
      @include edu-color-primary(border-color);
      box-sizing: border-box;
      border-radius: 50%;
      img {
        display: none;
      }
    }
    .prism-time-display {
      height: 26px;
      line-height: 26px;
      position: absolute;
      top: 18px;
      .current-time {
        font-size: 12px;
        font-weight: 400;
        color: #606266;
      }
      .time-bound,
      .duration {
        opacity: 0;
        width: 0;
        height: 0;
      }
    }
    .prism-progress {
      box-shadow: none;
      background: #ebeef5;
      border-radius: 3px;
    }
    .prism-progress .prism-progress-loaded {
      border-radius: 3px;
    }
  }
}
</style>
